<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
    <block slot="top">
      <view class="tabs">
        <view class="tab-item" @click="setIndex(index)" :class="currentIndex==index?'active':''" v-for="(item, index) in tabsList" :key="index">
          {{item.name}}
        </view>
      </view>
    </block>
    <view class="main">
      <view class="order-warpper">
        <view class="order-item" @click="toDetail(item)" v-for="(item, index) in dataList" :key="index">
          <view class="statusInfo">
            {{statusEnum[item.refund_type]}}
          </view>
          <view class="order-item-tp">
            <view class="order-label">
              订单编号：
            </view>
            <view class="order-line">
              <view class="orderNo">
                {{item.order_id}}
              </view>
            </view>
          </view>
          <view class="order-item-mid">
            <view class="goodsList" v-for="(itemc, indexc) in item.cartInfo" :key="indexc">
              <image class="goodsImg" :src="itemc.productInfo.image" mode=""></image>
              <view class="goodsInfo">
                <view class="goodsName text-twoline-ellipsis">{{itemc.productInfo.store_name}}</view>
                <view class="foot">
                  <view class="price">
                    ￥{{itemc.productInfo.price}}
                  </view>
                  <view class="count">
                    x{{itemc.cart_num}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="order-item-bom">
            <view class="fr">
              <view class="btn2"  v-if="item.refund_type==1 || item.refund_type==2" @click.stop="open(item)">取消售后</view>
              <view class="btn2" v-if="item.refund_type==2" @click.stop="toLogisticPage(item)">填写退货信息</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </z-paging>
    <uv-modal ref="modal" title="确定要取消售后？" :showCancelButton="true" @confirm="confirm"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        tabsList: [{
            name: "全部",
            value: 0
          },
          {
            name: "申请中",
            value: 1
          },
          {
            name: "已退款",
            value: 2
          }
        ],
        statusEnum: {
          1: "仅退款",
          2: "退货退款",
          3: "拒绝退款",
          4: "商品待退货",
          5: "退货待退款",
          6: "已退款"
        },
        currentIndex: 0,
        dataList: [],
        params: {
          refund_status: 0,
          page: 1,
          limit: 10
        },
        payParams: {
          uni: "", //订单编号
          paytype: "" //支付方式
        },
        uni:""
      }
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.refresh();
      })
    },
    methods: {
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.refundList(this.params).then(res => {
          console.log("售后订单", res);
          this.$refs.paging.complete(res.data.list);
        })
      },
      setIndex(index){
        this.currentIndex = index;
        this.params.refund_status = this.tabsList[index].value;
      },
      toLogisticPage(item){
        uni.navigateTo({
          url: `/pages/mine/logisticForm?id=${item.id}`
        })
      },
      setIndex(index) {
        this.currentIndex = index;
        this.params.refund_status  = this.tabsList[index].value;
        this.$refs.paging.refresh();
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/subpack/mine/refundDetail?id=${item.order_id}`
        })
      },
      open(item){
        this.uni = item.order_id;
        this.$refs.modal.open();
      },
      confirm() {
        reqApi.cancelTuikuan({uni: this.uni}).then(res => {
          uni.showToast({
            title: "取消成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            this.$refs.paging.refresh();
          }, 1500)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    padding: 30rpx;
    box-sizing: border-box;

    .order-warpper {
      .order-item {
        margin-bottom: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;
        position: relative;

        .statusInfo {
          width: 154rpx;
          height: 50rpx;
          background: #FFF3E9;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #FF8A23;
          text-align: center;
          line-height: 50rpx;
          border-radius: 0 30rpx 0 30rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .order-item-tp {
          .order-label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
          }

          .order-line {
            display: flex;
            justify-content: space-between;

            .orderNo {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #333;
            }

            .usePayTime {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #EA2222;
              display: flex;
              align-items: center;
            }
          }
        }

        .order-item-mid {
          .goodsList {
            padding: 20rpx;
            box-sizing: border-box;
            border-radius: 30rpx;
            background: #F7F8FA;
            display: flex;
            margin-top: 30rpx;

            .goodsImg {
              width: 120rpx;
              height: 120rpx;
              border-radius: 20rpx;
              margin-right: 20rpx;
            }

            .goodsInfo {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .goodsName {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #333333;
              }

              .foot {
                display: flex;
                justify-content: space-between;

                .price {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: bold;
                  font-size: 24rpx;
                  color: #EA2222;
                }

                .count {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #333333;
                }
              }
            }
          }
        }

        .order-item-bom {
          display: flex;
          align-items: center;
          margin-top: 30rpx;

          .fl {
            display: flex;
            align-items: center;

            .label {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }

            .value {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #EA2222;
            }
          }

          .fr {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .btn2 {
              width: 210rpx;
              height: 64rpx;
              background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
              border-radius: 74rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #FFFFFF;
              text-align: center;
              line-height: 64rpx;
              margin-left: 30rpx;
            }
          }
        }
      }
    }
  }

  .active {
    color: #FF8A23 !important;
  }

  .active::after {
    position: absolute;
    content: " ";
    width: 25rpx;
    height: 6rpx;
    background: #FF8A23;
    border-radius: 110rpx;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .container {
    .tabs {
      display: flex;
      background: #fff;

      .tab-item {
        height: 88rpx;
        flex: 1;
        line-height: 88rpx;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
        position: relative;
      }
    }
  }
</style>